<template>
   
  <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" style="height: calc(77vh)">

    <!-- -------------------------------------公共按钮--------------------------------------------->
    <div style="height: calc(15vh)">
        <el-row style="height: 100%">
            <el-col :span="4"></el-col>
            <el-col :span="15" class="flex content-end justify-end">
                <el-button v-if="activeName == 'IpSet'" type="primary" class="self-end mr-3">重置</el-button>
                <el-button v-else type="primary" class="self-end mr-3">刷新</el-button>
                <el-button v-if="activeName == 'FirmwareUpdate'" type="primary" class="self-end mr-4" @click="submitUpload">升级</el-button>
                <el-button v-else type="primary" class="self-end mr-4">保存</el-button>
            </el-col>
        </el-row>
    </div>
    <!---------------------------------------   1    --------------------------------------------->
    <el-tab-pane label="录音设置" name="RecordingSet">
        <el-row class="mt-4">
            <el-col :span="4"></el-col>
            <el-col :span="15" class="tab_s">
                <el-divider content-position="center">通讯设置</el-divider>
            </el-col>
        </el-row>
        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.RecordingSet.key[0]}}</el-col>
            <el-col :span="6"><el-input v-model="Input.RecordingSet.Port" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">{{Input.RecordingSet.key[1]}}</el-col>
            <el-col :span="3"> <el-input v-model="Input.RecordingSet.WebPort" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.RecordingSet.key[2]}}</el-col>
            <el-col :span="6"><el-input v-model="Input.RecordingSet.Debug" style="width: 220px" /> </el-col>
            <el-col :span="3" class="tab_s">{{Input.RecordingSet.key[3]}}</el-col>
            <el-col :span="3"><el-input v-model="Input.RecordingSet.ChannelNumber"  style="width: 220px" />
            </el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.RecordingSet.key[4]}}</el-col>
            <el-col :span="6">
                <el-select v-model="Input.RecordingSet.CompressedFormat" placeholder="Select" style="width: 220px">
                        <el-option
                        v-for="item in Input.RecordingSet.CompressedFormatTab"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                        />
                    </el-select>
            </el-col>
            <el-col :span="3" class="tab_s">{{Input.RecordingSet.key[5]}}</el-col>
            <el-col :span="3"><el-input v-model="Input.RecordingSet.RunTime" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="4" ></el-col>
            <el-col :span="15" class="tab_s">
                <el-divider content-position="center">连接远端主机设置</el-divider>
            </el-col>
            <el-col :span="5"></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.RecordingSet.key[6]}}</el-col>
            <el-col :span="6">
                <el-select v-model="Input.RecordingSet.ConnectToRemoteHost" placeholder="Select" style="width: 220px">
                        <el-option
                        v-for="item in Input.RecordingSet.ConnectToRemoteHostTab"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                        />
                    </el-select>
            </el-col>
            <el-col :span="3" class="tab_s">{{Input.RecordingSet.key[7]}}</el-col>
            <el-col :span="3">
                <el-input v-model="Input.RecordingSet.RemoteHostIp" placeholder="Please input" style="width: 220px" />
            </el-col>
        </el-row>
    </el-tab-pane>
    <!-- -------------------------------------   2    --------------------------------------------->
    <el-tab-pane label="详细通道设置" name="ChannelSet">
        
        <!-- -------------------------         分界线     --------------------------------------->
        <el-row class="mt-4">
            <el-col :span="4" ></el-col>
            <el-col :span="15" class="tab_s">
                <el-divider content-position="center"></el-divider>
            </el-col>
            <el-col :span="5"></el-col>
        </el-row>

        <!-- -------------------------   通道选择 button    --------------------------------------->
        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.ChannelSet.zh.ChannelId}}</el-col>
            <el-col :span="6">
                <el-select v-model="Input.ChannelSet.ChannelId" placeholder="Select" style="width: 220px">
                    <el-option
                    v-for="item in Input.ChannelSet.ChannelIdTab"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                    />
                </el-select>
            </el-col>
        </el-row>

        <!-- -------------------------         16个控件     --------------------------------------->
        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.ChannelSet.zh.LineNumber}}</el-col>
            <el-col :span="6"><el-input v-model="Input.ChannelSet.LineNumber" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">{{Input.ChannelSet.zh.ChannelName}}</el-col>
            <el-col :span="3"> <el-input v-model="Input.ChannelSet.ChannelName" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.ChannelSet.zh.RecordingEnable}}</el-col>
            <el-col :span="6"><el-input v-model="Input.ChannelSet.RecordingEnable" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">{{Input.ChannelSet.zh.RecordingStartupMethod}}</el-col>
            <el-col :span="3"> <el-input v-model="Input.ChannelSet.RecordingStartupMethod" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.ChannelSet.zh.KeyedStart}}</el-col>
            <el-col :span="6"><el-input v-model="Input.ChannelSet.KeyedStart" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">{{Input.ChannelSet.zh.KeyedEnd}}</el-col>
            <el-col :span="3"> <el-input v-model="Input.ChannelSet.KeyedEnd" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.ChannelSet.zh.VoiceControlSensitivity}}</el-col>
            <el-col :span="6"><el-input v-model="Input.ChannelSet.VoiceControlSensitivity" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">{{Input.ChannelSet.zh.VoiceControlledHangUpTime}}</el-col>
            <el-col :span="3"> <el-input v-model="Input.ChannelSet.VoiceControlledHangUpTime" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.ChannelSet.zh.InputGain}}</el-col>
            <el-col :span="6"><el-input v-model="Input.ChannelSet.InputGain" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">{{Input.ChannelSet.zh.OffHookVoltage}}</el-col>
            <el-col :span="3"> <el-input v-model="Input.ChannelSet.OffHookVoltage" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.ChannelSet.zh.VoiceRecordingMode}}</el-col>
            <el-col :span="6">
                <el-select v-model="Input.ChannelSet.VoiceRecordingMode" placeholder="Select" style="width: 220px">
                    <el-option
                    v-for="item in Input.ChannelSet.VoiceRecordingModeTab"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                    />
                </el-select>
            </el-col>

            <el-col :span="3" class="tab_s">{{Input.ChannelSet.zh.MaxRecordingTime}}</el-col>
            <el-col :span="3"> <el-input v-model="Input.ChannelSet.MaxRecordingTime" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.ChannelSet.zh.RecordingPeriod_1}}</el-col>
            <el-col :span="6"><el-input v-model="Input.ChannelSet.RecordingPeriod_1" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">{{Input.ChannelSet.zh.RecordingPeriod_2}}</el-col>
            <el-col :span="3"> <el-input v-model="Input.ChannelSet.RecordingPeriod_2" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">{{Input.ChannelSet.zh.RecordingPeriod_3}}</el-col>
            <el-col :span="6"><el-input v-model="Input.ChannelSet.RecordingPeriod_3" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">{{Input.ChannelSet.zh.RecordingPeriod_4}}</el-col>
            <el-col :span="3"> <el-input v-model="Input.ChannelSet.RecordingPeriod_4" style="width: 220px" /></el-col>
        </el-row>

    </el-tab-pane>

    <!-- ------------------------------ 3  -------------------------- -->
    <el-tab-pane label="时间设置" name="timeSet">
         <!-- -------------------------         分界线     --------------------------------------->
         <el-row class="mt-4">
            <el-col :span="4" ></el-col>
            <el-col :span="15" class="tab_s">
                <el-divider content-position="center"></el-divider>
            </el-col>
            <el-col :span="5"></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">设备时间</el-col>
            <el-col :span="6"><el-input v-model="Input.TimeSet.Device" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">电脑时间</el-col>
            <el-col :span="3"> <el-input v-model="Input.TimeSet.PC" style="width: 220px" /></el-col>
        </el-row>
    </el-tab-pane>
    <!-- ------------------------------ 4  -------------------------- -->
    <el-tab-pane label="IP设置" name="IpSet">

         <!-- -------------------------         分界线     --------------------------------------->
         <el-row class="mt-4">
            <el-col :span="4" ></el-col>
            <el-col :span="15" class="tab_s">
                <el-divider content-position="center"></el-divider>
            </el-col>
            <el-col :span="5"></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">Ip地址</el-col>
            <el-col :span="6"><el-input v-model="Input.IpSet.Ip" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">子网掩码</el-col>
            <el-col :span="3"> <el-input v-model="Input.IpSet.IpMask" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">网关</el-col>
            <el-col :span="6"><el-input v-model="Input.IpSet.Gateway" style="width: 220px" /></el-col>
            <el-col :span="3" class="tab_s">NDS服务器</el-col>
            <el-col :span="3"> <el-input v-model="Input.IpSet.Nds" style="width: 220px" /></el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="6" class="tab_s">MAC地址</el-col>
            <el-col :span="6"><el-input v-model="Input.IpSet.Mac" style="width: 220px" /></el-col>
        </el-row>

    </el-tab-pane>

     <!-- ------------------------------ 5  -------------------------- -->
     <el-tab-pane label="固件升级" name="FirmwareUpdate">
         <!-- -------------------------         分界线     --------------------------------------->
         <el-row class="mt-4">
            <el-col :span="4" ></el-col>
            <el-col :span="15" class="tab_s">
                <el-divider content-position="center"></el-divider>
            </el-col>
            <el-col :span="5"></el-col>
        </el-row>
        <el-row class="mt-4">
            <el-col :span="10" class="tab_s">子板编号</el-col>
            <el-col :span="6">
                <el-select v-model="Input.FirmwareUpdateSet.SubCard" placeholder="Select" style="width: 133px">
                    <el-option
                    v-for="item in Input.FirmwareUpdateSet.SubCardTab"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                    />
                </el-select>
            </el-col>
        </el-row>

        <el-row class="mt-4">
            <el-col :span="10"></el-col>
            <el-upload
            v-model:file-list="fileList"
            ref="upload"
            class="upload-demo "
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
        >
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
            <div class="el-upload__tip">
                请选择要升级的固件
            </div>
            </template>
            </el-upload>
        </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const upload = ref(null)
const fileList = ref([
  {
    name: 'element-plus-logo.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
])

function handleRemove (file, uploadFiles){
  console.log(file, uploadFiles)
}

function handlePreview(uploadFile) {
  console.log(uploadFile)
}

function handleExceed(files, uploadFiles) {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

function beforeRemove(uploadFile, uploadFiles) {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}

function submitUpload() {
  upload.value.submit()
}
const Input = reactive({
    RecordingSet:{
        Port:23400,
        WebPort:80,
        Debug:false,
        ChannelNumber:8,
        CompressedFormat:'MP3',
        CompressedFormatTab:[
            {
                value: 'MP3',
                label: 'MP3',
            },
            {
                value: 'MP4',
                label: 'MP4',
            },
        ],
        RunTime:1000,
        ConnectToRemoteHost:'disable',
        ConnectToRemoteHostTab:[
            {
                value: 'enable',
                label: 'enable',
            },
            {
                value: 'disable',
                label: 'disable',
            },
        ],
        RemoteHostIp:'192.168.100.2',
        key:['主端口','Web端口','Debug开关','通道总数','压缩格式','重启时间','连接使能','远程主机IP']
    },
    ChannelSet:{
        ChannelId:'channel_1',
        ChannelIdTab:[
            {
                value: 'channel_1',
                label: 'channel_1',
            },
            {
                value: 'channel_2',
                label: 'channel_2',
            },
            {
                value: 'channel_3',
                label: 'channel_3',
            },
            {
                value: 'channel_4',
                label: 'channel_4',
            },
            {
                value: 'channel_5',
                label: 'channel_5',
            },
            {
                value: 'channel_6',
                label: 'channel_6',
            },
        ],
        LineNumber:123555678,
        ChannelName:1,
        RecordingEnable:'enable',
        RecordingStartupMethod:1,
        KeyedStart:1,
        KeyedEnd:2,
        VoiceControlSensitivity:1,
        VoiceControlledHangUpTime:2,
        InputGain:3,
        OffHookVoltage:4,
        VoiceRecordingMode:'普通',
        MaxRecordingTime:6,
        RecordingPeriod_1:6,
        RecordingPeriod_2:7,
        RecordingPeriod_3:7,
        RecordingPeriod_4:0,
        VoiceRecordingModeTab:[{value: 'Normal',label: '普通'},{value: 'KeepRecording',label: '一直录音'},{value: 'ManualRecording',label: '手动录音'}],

        zh:{
            ChannelId:'通道Id',
            LineNumber:'线路号码',
            ChannelName:'通道名称',
            RecordingEnable:'是否录音',
            RecordingStartupMethod:'录音启动方式',
            KeyedStart:'键控启动键',
            KeyedEnd:'键控结束键',
            VoiceControlSensitivity:'声控灵敏度',
            VoiceControlledHangUpTime:'声控挂机时间',
            InputGain:'输入增益',
            OffHookVoltage:'摘机电压值',
            VoiceRecordingMode:'声控录音模式',
            MaxRecordingTime:'最大录音时间(秒)',
            RecordingPeriod_1:'录音时段1',
            RecordingPeriod_2:'录音时段2',
            RecordingPeriod_3:'录音时段3',
            RecordingPeriod_4:'录音时段4'
        }
        
    },
    TimeSet:{
        Device:'11:11',
        PC:'11:12',
    },
    IpSet:{
        Ip:'192.168.1.98',
        IpMask:'255.255.255.255',
        Gateway:'192.168.1.1',
        Nds:'114.114.114.114',
        Mac:'00:00:11:11:22:33',
    },
    FirmwareUpdateSet:{
        SubCard:'1',
        SubCardTab:[{value: '1',label: '1'},{value: '2',label: '2'},{value: '3',label: '3'}]
    },
})

const activeName = ref('RecordingSet')

const handleClick = (tab, event) => {
  console.log(tab, event)
}
function test(e)
{
    console.log(e.id,e.tab)
    if(e.tab)
        return true
    else
        return false
}
</script>

<style scop>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.tab_s{
    @apply pr-5 !important;
    align-self: center;
    text-align: end;
}

</style>